<!-- 好物推荐 -->
<template>
	<div class="picks-mall">
		<img class="picks-mall-left" alt="100buy" src="@/assets/images/home/mall-left.png" />
		<div class="picks-mall-right">
			<div class="mall-right-item" v-for="(item,index) in picksList" :key="index" @click="lookDet(item,index)">
				<!-- 商品图 -->
				<img :src="item.mainImg" class="item-mainimg" alt="">
				<!-- 标题 -->
				<div class="item-rights">
					<div class="item-msg ff-regular">
						<img v-if="index < 3" :src="require(`@/assets/images/home/pic_top${index + 1}.png`)" class="item-msg-icon" alt="">
						{{ item.title }}
					</div>
					<!-- 价格 -->
					<div class="item-price ff-regular">
						{{ userCurrency.code }}
						<span class="price-num ff-bold">{{ item.price }}</span>
					</div>
				</div>
			</div>
			<div class="more-text ff-regular" @click="jumpMet()">
				{{ $t('header.more_shop_product') }}
				<Icon type="ios-arrow-forward" />
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import { queryProductPage } from "@/api/product";
	import { toSeoFriendsChannel } from '@/common/common';
	import { detailPoint } from '@/api/user';
	import { pointUser } from "@/common/point/api-hook";//打点日志
	
	export default{
		data(){
			return{
				picksList:[]
			}
		},
		components:{
			
		},
		props:{
			
		},
		computed:{
			...mapState({
				userCurrency: (state) => state.user.userCurrency,
				userInfo: state => state.user.userInfo,
			}),
		},
		created(){
			this.getPicksGoods();
		},
		mounted() {
			
		},
		methods:{
			getPicksGoods() {
				queryProductPage().then((res) => {
					this.picksList = res.result;
				})
			},
			lookDet(item,index) {
				const query = {};
				if (this.userInfo.inviteCode) {
					query.inviteCode = this.userInfo.inviteCode
				}
				const channelId = toSeoFriendsChannel(item.channel);
				let toUrl = this.$router.resolve({
					path: `/product/${channelId}/${item.spu}`,
					query
				});
				let data = {
					channel:1,
					position:index + 1,
					detailUrl:`${this.$store.state.config.config.webDomain}/product/${channelId}/${item.spu}`,
					productChannel:item.channel,
					productType:item.categoryName,
					spuNo:item.spu,
					price:item.price
				}
				detailPoint(data)
				window.open(toUrl.href);
			},
			jumpMet() {
				pointUser('actions', '3003-1');
				this.$router.push('/shopWindow')
			},
		}
	}
</script>

<style lang="less" scoped>
	.picks-mall{
		display: flex;
		align-items: flex-start;
		font-size: 0;
		.picks-mall-left{
			width: 230px;
			height: 389px;
		}
		.picks-mall-right{
			padding: 24px 24px 0 24px;
			height: 389px;
			overflow-y: scroll;
			&::-webkit-scrollbar {
				display: none;
			}
			.more-text{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 20px;
				color: #1E1714;
				line-height: 24px;
				padding-bottom: 17px;
				text-align: center;
				cursor: pointer;
			}
			.mall-right-item{
				display: flex;
				align-items: center;
				padding-bottom: 24px;
				cursor: pointer;
				.item-mainimg{
					width: 120px;
					height: 120px;
					border-radius: 2px;
				}
				.item-rights{
					width: 294px;
					padding-left: 24px;
				}
				.item-msg{
					color: #222;
					font-size: 18px;
					line-height: 25px;
					white-space: pre-line;
          /*允许换行*/
          overflow: hidden;
          text-overflow: ellipsis;
          /*省略号*/
          display: -webkit-box;
          -webkit-box-orient: vertical;
          /*行向垂直排列*/
          -webkit-line-clamp: 2; //*限制2
					.item-msg-icon{
						width: 41px;
						height: 22px;
					}
				}
				.item-price{
					margin-top: 16px;
					color: #FF186B;
					font-size: 14px;
					line-height: 28px;
					.price-num{
						margin-left: 8px;
						font-size: 20px;
						font-weight: 800;
					}
				}
			}
		}
	}
</style>